<template>
	<view>
		<view class="header-max">
			<view class="header-max-content">
				<image @tap="back" src="@/static/images/xiangzuo.png" mode="widthFix" class="back"></image>
				<view class="title">{{title}}</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="publish" @tap="publish">发布</view>
				<!-- #endif -->
			</view>
		</view>

		<view style="height: 190rpx;background-color: #fff;"></view>
		<view class="header-search">
			<view class="input">
				<image src="@/static/images/sousuo1.png" class="search-icon" mode="widthFix"></image>
				<input class="search-text" type="text" placeholder="请输入关键字" v-model="keyword">
				<view class="search-btn" @tap="getSearchRes">搜索</view>
			</view>
		</view>

		<FilterDropdown :menuTop="menuTop" :filterData="filterData" :defaultSelected="defaultSelected"
			:updateMenuName="true" dataFormat="Object"
			style="border-top: 2upx solid rgb(242 232 232);border-bottom: 2upx solid rgb(242 232 232);">
		</FilterDropdown>
		<view style="height: 20rpx;background-color: #fff;"></view>
		<view class="item-data">
			<view class="data" @tap="houseDetail(item.id)" v-for="(item,index) in lists" :key="index">
				<image :src="item.pic" class="data-image" mode="scaleToFill"></image>
				<view class="item-data-right">
					<view class="item-data-right-title">
						{{item.name}}
					</view>
					<view class="item-data-right-center">
						<text style="font-color:#5d5d5d;font-size: 26upx;margin-right: 15upx;">{{item.district}}</text>
						<text style="font-color:#5d5d5d;font-size: 26upx;">{{item.address}}</text>
					</view>
					<view class="item-data-right-bottom">
						<view style="display: flex;align-items: center;">
							<text style="font-color:#5d5d5d;font-size: 30upx;color:#ff1e1e">{{item.expect_price}}</text>
							<text style="font-size: 26upx;color:#ff1e1e;margin-right: 15upx;">元</text>
						</view>
						<text style="font-color:#5d5d5d;font-size: 26upx;margin-right: 15upx;">{{item.size}}㎡</text>
						<text style="font-color:#5d5d5d;font-size: 26upx;">{{item.house_type2}}</text>
					</view>
				</view>
			</view>

			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import FilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	export default {
		components: {
			uniLoadMore,
			FilterDropdown
		},
		data() {
			return {
				title: '快捷酒店',
				keyword: '',
				type: 1,

				lists: [],
				loadingType: 'more',
				// #ifdef APP-PLUS
				menuTop: '290',
				// #endif

				// #ifdef H5
				menuTop: '300',
				// #endif

				// #ifdef MP-WEIXIN
				menuTop: '284',
				// #endif

				defaultSelected: [],
				filterData: [],
				valueArr: [],
				dataObj: {
					page: 1,
				}
			}
		},

		onLoad: function(options) {
			uni.showLoading({
				title: '加载中...'
			});

			this.getAllSearch();
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			//筛选条件
			uni.$on('confirm', (cdata) => {
				this.keyword = ''
				this.valueArr = cdata.value;
				this.dataObj.page = 1;
				this.getListBySearch(this.valueArr)
			})

		},

		onReachBottom() {
			this.loadData();
		},

		methods: {
			back() {
				uni.navigateTo({
					url: '/pages7/pages/index/index'
				})
			},

			publish() {
				let url = '/pages7/pages/nimble/lssueHouse';
				uni.navigateTo({
					url: url
				})
			},

			//获取搜索条件
			async getAllSearch() {
				let sdata = await this.$myRequest({
					url: '/common/allSearchr'
				})

				let data = sdata.data.data;
				this.filterData = data;
			},

			async getListBySearch(cdata) {
				let dataObj = this.dataObj;
				if (cdata.length > 0) {
					cdata.forEach(function(item, index) {
						if ('keyword' in item) {
							dataObj.keyword = item.keyword;
						} else {
							switch (index) {
								case 0:
									dataObj.district = item[2] ? item[2] : item[1];
									break;
								case 1:
									dataObj.price = item[0][0];
									break;
								case 2:
									dataObj.house_type = item[0];
									break;
							}
						}
					});
				}

				this.dataObj = dataObj;
				this.loadData('refresh');
				// console.log(dataObj)
			},

			//关键字搜索
			getSearchRes() {
				this.lists = [];
				this.dataObj.page = 1;
				this.dataObj.keyword = this.keyword;
				this.loadingType = 'more';

				this.loadData('refresh')
			},

			async loadData(type = 'add') {
				//这里是将订单挂载到tab列表下
				if ((this.loadingType === 'loading' || this.loadingType === 'noMore') && type == 'add') {
					//防止重复加载
					return;
				}

				if (type == 'refresh') {
					this.lists = [];
				}

				this.loadingType = 'loading';

				let dataObj = this.dataObj;
				let url = '/houser_rent_list';

				let ldata = await this.$myRequest({
					url: url,
					data: dataObj,
					methods: 'post'
				})

				let ndata = ldata.data.data.list;
				if (ndata.length > 0) {
					this.lists = [...this.lists, ...ndata];
					let count = ldata.data.data.totalList;
					if (this.lists.length < count) {
						this.dataObj.page = this.dataObj.page + 1;
						this.loadingType = 'more';
					} else {
						this.loadingType = 'noMore';
					}
				} else {
					this.loadingType = 'noMore';
				}
			},

			houseDetail(id) {
				uni.navigateTo({
					url: '/pages7/pages/nimble/houseDetile1?id=' + id
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.header-max {
		background-color: white;
		position: fixed;
		width: 100%;
		height: 180rpx;
		z-index: 1000;

		.header-max-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: absolute;
			top: 50px;
			padding: 0 30upx;

			.back {
				width: 17rpx;
				height: 30rpx;
			}

			.title {
				letter-spacing: 2rpx;
				font-size: 38rpx;
				font-weight: bold;
			}

			.publish {
				font-size: 30upx;
				letter-spacing: 4upx;
				color: white;
				background-color: $base-color;
				border-radius: 50upx;
				padding: 10upx;
			}
		}
	}

	.header-search {
		background-color: #fff;

		.input {
			display: flex;
			background-color: white;
			width: 710rpx;
			height: 80rpx;
			padding: 10rpx;
			border: 3rpx solid #f3511a;
			border-radius: 100rpx;
			align-items: center;
			margin: 0rpx auto;
			// margin-bottom: 25rpx;

			.search-text {
				flex: 1;
				color: #6d6e6e;
				font-size: 28rpx;
			}

			.search-btn {
				font-size: 30rpx;
				background-color: #f3511a;
				color: white;
				width: 110rpx;
				letter-spacing: 2rpx;
				height: 57rpx;
				line-height: 57rpx;
				text-align: center;
				border-radius: 50rpx;
			}

			.search-icon {
				width: 25rpx;
				height: 25rpx;
				margin: 0 10rpx;
			}
		}
	}

	.item-data {
		background-color: #fff;
		position: absolute;
		top: 380upx;
		width: 100%;

		.data {
			position: relative;
			width: 100%;
			height: 230upx;
			padding: 35upx 30upx;
			border-bottom: 2upx solid #eee;
			display: flex;
			flex-direction: row;

			.data-image {
				width: 160rpx;
				height: 160upx;
			}

			.item-data-right {
				padding-left: 14upx;
				width: 76%;

				.item-data-right-title {
					font-size: 26upx;
					height: 80upx;
					font-color: #333;
					font-weight: bold;
				}

				.item-data-right-bottom {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
			}
		}

	}
</style>